<template>
	<view v-if="list && list.length > 0" class="order-list">
		<view @click.stop="handleSelect(order,0)" class="order" v-for="(order, index) in list" :key="index">
			<view class="order-header">
				<view class="flex-fill flex align-center">
					<view v-if="order.shop" class=" font-size-medium margin-right-sm">{{ order.shop.name||'源社区' }}</view>
					<view v-else class=" font-size-medium margin-right-sm">源社区</view>
					<view v-if="order.orderType==1" class="cu-tag round bg-menu">堂食</view>
					<view v-if="order.orderType==2" class="cu-tag round bg-menu">外卖</view>
					<view v-if="order.orderType==3" class="cu-tag round bg-menu">自提</view>
					<view v-if="order.orderType==4" class="cu-tag round bg-menu">拼团</view>
				</view>
			
				<view class="status">
					<view>{{ getStatus(order.state) }}</view>
					<image src="/static/images/common/black_arrow_right.png"></image>
				</view>
			</view>
			<scroll-view scroll-x>
				<view class="images">
					<image class="radius" :src="item.thumbnail" v-for="(item, index) in order.detailList" :key="index">
					</image>
				</view>
			</scroll-view>
			<view class="info">
				<view class="left">
					<view>订单编号：{{ order.orderCode }}</view>
					<view>下单时间：{{ order.buyTime }}</view>
				</view>
				<view class="right">￥{{ order.payAmount }}</view>
			</view>
			<view class="flex justify-between align-center">
				<view v-if="order.serialNum&&order.serialNum.length>0">
					<text class="text-size-12">序列号</text>
					<text class="text-menu margin-left-xs">{{order.serialNum}}</text>
				</view>
				<!-- <button type="default" hover-class="none">开发票</button> -->
				<!-- <button type="default" hover-class="none">查看评论</button> -->
				<view>
					<!-- 			<button class="cu-btn sm margin-lr-xs" @click.stop="handleSelect(order,1)" v-if="order.state>4"
						type="primary" plain hover-class="none">再来一单</button> -->
					<button @click.stop="handleRouteTruckspath(order)" v-if="order.sfId&&order.sfId.length>0"
						class="cu-btn round  line-gray margin-lr-xs" type="primary" plain
						hover-class="none">查看配送</button>
					<button class="cu-btn round  line-gray margin-lr-xs" @click.stop="handleSelect(order,4)"
						v-if="order.state>=5&&order.state<11" type="primary" plain
						hover-class="none">售后/退款</button>
					<button class="cu-btn round  line-gray margin-lr-xs" @click.stop="handleSelect(order,6)"
						v-if="order.state>9&&order.state<11||order.state==4" type="primary" plain
						hover-class="none">评论</button>
					<button class="cu-btn round  line-gray margin-lr-xs" @click.stop="handleSelect(order,3)" v-if="order.state==0"
						type="primary" plain hover-class="none">取消</button>
					<button @click.stop="handleSelect(order,2)" v-if="order.state==0" type="primary" plain
						hover-class="none" class="cu-btn round  line-gray margin-lr-xs">立即支付</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { useSettingStore } from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: {
			default: () => {
				return [
					{
						"id": "",
						"shopId": "",
						"serialNum": "",
						"shop": {
							"id": "",
							"name": "",
							"address": "77号1层",
							"region": "",
							"lon": "104.07984",
							"lat": "30.657457"
						},
						"orderCode": "231219191954755",
						"amount": 3.00,
						"payAmount": 3.00,
						"productNum": 1,
						"refundAmount": null,
						"buyTime": "2023-12-19 19:19:55",
						"payTime": null,
						"cancelTime": null,
						"state": 1,
						"payType": 2,
						"remark": "",
						"sfId":"",
						"detailList": [{
							"id": "22573134758000186",
							"orderId": "22573134757000128",
							"productId": "19279425026000175",
							"productName": "菠萝",
							"attrValue": null,
							"thumbnail": "https://www.shuimuqingyuan.cn/img/2023-11-19/cc8337274f134fe08a12cea954699386.png",
							"amount": 3.00,
							"num": 1
						}],
					}
				];
			}
		}
	});

	const statusList = [
		{
			id: 0,
			name: '待支付'
		}, {
			id: 1,
			name: '支付中'
		},
		{
			id: 2,
			name: '支付失败'
		},
		{
			id: 3,
			name: '已取消'
		},
		{
			id: 4,
			name: '已退款'
		},
		{
			id: 5,
			name: '支付成功'
		},
		{
			id: 6,
			name: '商家待确定'
		},
		{
			id: 7,
			name: '已接单'
		},
		{
			id: 8,
			name: '配送中'
		},
		{
			id: 9,
			name: '配送完成'
		},
		{
			id: 10,
			name: '已完成'
		},
		{
			id: 11,
			name: '售后中'
		},
		{
			id: 12,
			name: '售后处理'
		}
	];
	const getStatus = (id : any) => {
		let info = statusList.find((obj : any) => obj.id == id);
		if (info) {
			return info.name;
		} else {
			return '获取失败';
		}
	};
	const handleRoute = (e : any) => {
		uni.navigateTo({
			url: '/manage/order/orderdetalis?orderId=' + e.id
		});
	};
	
	const handleRouteTruckspath = (e : any) => {
		uni.navigateTo({
			url: '/pages/order/truckspath_client?id=' + e.id
		});
	};
	const handleSelect = (e : any, type) => {
		if (type == 0) {
			if (e.state == 7 || e.state == 8) {
				uni.navigateTo({
					url: '/pages/order/truckspath_client?id=' + e.id
				});
			} else {
				uni.navigateTo({
					url: '/pages/order/detail?id=' + e.id
				})
			}
		} else if (type == 1) {
			uni.navigateTo({
				url: '/pages/canteen/index?id=' + e.shopId
			})
		} else {
			emit('action', e, type);
		}
	};
</script>

<style lang="scss" scoped>
	.order-list {
		display: flex;
		width: 100%;
		flex-direction: column;

		.order {
			background-color: $bg-color-white;
			padding: 30rpx 40rpx;
			margin-bottom: 18rpx;

			.order-header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.status {
					font-size: $font-size-base;
					color: $text-color-grey;
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-left: $spacing-row-sm;
					}
				}
			}

			.images {
				display: flex;
				padding: 30rpx 0;

				image {
					flex-shrink: 0;
					width: 150rpx;
					height: 112.5rpx;
				}
			}

			.info {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;
					font-size: $font-size-base;
					color: $text-color-grey;
				}

				.right {
					font-size: $font-size-lg;
					color: $text-color-base;
				}
			}

			.action {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				button {
					margin-left: 30rpx;
					font-size: $font-size-sm;
				}
			}
		}
	}
</style>